<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<title>无标题文档</title>
	<link href="css/font-awesome.css" rel="stylesheet">
	<style type="text/css">
		div {
			width: 10px;
			height: 10px;
			position: absolute;
			top: 0;
			left: 0;
		}

		div::after {
			font-family: fontawesome;
			content: "\f06c";
			font-size: 18px;
			color: green;
		}
	</style>

</head>

<body>
	<!--e.pageX e.pageY-->
	<div id="box" style=" top: 172px;left: 341px;"></div>
	<div style="top: 172px; left: 341px;"></div>
	<div style="top: 69px; left: 272px;"></div>
	<div style="top: 69px; left: 272px;"></div>
	<div style="top: 69px; left: 272px;"></div>
	<div style="top: 75px; left: 275px;"></div>
	<div style="top: 77px; left: 278px;"></div>
	<div style="top: 81px; left: 281px;"></div>
	<div style="top: 83px; left: 284px;"></div>
	<div style="top: 86px; left: 291px;"></div>
	<div style="top: 86px; left: 299px;"></div>
	<div style="top: 89px; left: 309px;"></div>
	<div style="top: 89px; left: 325px;"></div>
	<div style="top: 89px; left: 339px;"></div>
	<div style="top: 89px; left: 358px;"></div>
	<div style="top: 86px; left: 380px;"></div>
	<div style="top: 84px; left: 399px;"></div>
	<div style="top: 80px; left: 427px;"></div>
	<div style="top: 78px; left: 451px;"></div>
	<div style="top: 75px; left: 506px;"></div>
	<div style="top: 75px; left: 530px;"></div>
	<script type="text/javascript">
		var div = document.getElementsByTagName("div");
		document.onmousemove = function (eve) {
			var e = eve || event;
			div[div.length - 1].style.left = e.pageX + "px";
			div[div.length - 1].style.top = e.pageY + "px";
			for (var i = 0; i < div.length - 1; i++) {
				div[i].style.left = div[i + 1].style.left;
				div[i].style.top = div[i + 1].style.top;
			}
		}
	</script>
</body>

</html>